/**
 * SmartUI Studio - 文件浏览器组件
 * 用于动态加载和显示项目文件结构
 */

class FileExplorer {
    constructor(containerId, projectId) {
        this.container = document.getElementById(containerId);
        this.projectId = projectId;
        this.currentPath = '';
        this.loadedPaths = new Set(); // 用于跟踪已加载的路径
        this.activeFile = null; // 当前激活的文件
        
        // 初始化
        this.init();
    }
    
    /**
     * 初始化文件浏览器
     */
    init() {
        // 加载根目录
        this.loadDirectory(this.currentPath);
        
        // 设置事件委托，处理文件树的点击事件
        this.container.addEventListener('click', (event) => {
            const target = event.target.closest('.folder > span, .file > span');
            if (!target) return;
            
            const item = target.parentElement;
            
            if (item.classList.contains('folder')) {
                this.toggleFolder(item);
            } else if (item.classList.contains('file')) {
                this.selectFile(item);
            }
        });
    }
    
    /**
     * 加载指定路径的目录内容
     * @param {string} path - 相对于项目根目录的路径
     * @param {HTMLElement} parentElement - 父元素，用于追加子目录内容
     */
    loadDirectory(path, parentElement = null) {
        // 如果没有指定父元素，则使用容器
        const container = parentElement || this.container;
        
        // 显示加载指示器
        if (!parentElement) {
            container.innerHTML = '<div class="loading-indicator"><i class="bi bi-arrow-repeat spin"></i> 正在加载...</div>';
        } else {
            const loadingIndicator = document.createElement('div');
            loadingIndicator.className = 'loading-indicator';
            loadingIndicator.innerHTML = '<i class="bi bi-arrow-repeat spin"></i> 正在加载...';
            container.appendChild(loadingIndicator);
        }
        
        // 确保项目ID是字符串类型
        const projectIdStr = String(this.projectId);
        console.log(`加载目录: 项目ID=${projectIdStr}, 路径=${path}`);
        
        // 发起API请求获取目录内容
        axios.get(`/api/project/directory?project_id=${projectIdStr}&path=${encodeURIComponent(path)}`)
            .then(response => {
                console.log(`API响应状态: ${response.status}`);
                if (!response.ok) {
                    if (response.status === 404) {
                        // 如果是404错误，可能是项目目录不存在
                        throw new Error('项目目录不存在，请确认项目ID是否正确');
                    } else {
                        throw new Error(`HTTP错误: ${response.status}`);
                    }
                }
                return response.json();
            })
            .then(data => {
                // 标记此路径已加载
                this.loadedPaths.add(path);
                console.log('目录内容加载成功:', data);
                
                // 创建目录内容
                this.renderDirectoryContents(data.items, container, parentElement !== null);
            })
            .catch(error => {
                console.error('加载目录内容失败:', error);
                container.innerHTML = `<div class="error-message"><i class="bi bi-exclamation-triangle"></i> 加载失败: ${error.message}</div>`;
                
                // 如果是根目录加载失败，显示更详细的错误信息
                if (!parentElement) {
                    container.innerHTML += `
                        <div class="error-details">
                            <p>可能的原因:</p>
                            <ul>
                                <li>项目ID格式不正确 (当前ID: ${this.projectId})</li>
                                <li>项目目录不存在</li>
                                <li>服务器配置问题</li>
                            </ul>
                        </div>
                    `;
                }
            });
    }
    
    /**
     * 渲染目录内容
     * @param {Array} items - 目录项列表
     * @param {HTMLElement} container - 容器元素
     * @param {boolean} isSubDirectory - 是否为子目录
     */
    renderDirectoryContents(items, container, isSubDirectory) {
        // 移除加载指示器
        const loadingIndicator = container.querySelector('.loading-indicator');
        if (loadingIndicator) {
            container.removeChild(loadingIndicator);
        }
        
        // 如果不是子目录，则清空容器
        if (!isSubDirectory) {
            container.innerHTML = '';
        }
        
        // 如果没有项目，显示空消息
        if (items.length === 0) {
            const emptyMessage = document.createElement('div');
            emptyMessage.className = 'empty-message';
            emptyMessage.innerHTML = '<i class="bi bi-info-circle"></i> 此目录为空';
            container.appendChild(emptyMessage);
            return;
        }
        
        // 创建列表元素（如果是根目录）
        let listElement;
        if (!isSubDirectory) {
            listElement = container;
        } else {
            listElement = document.createElement('ul');
            container.appendChild(listElement);
        }
        
        // 添加目录项
        items.forEach(item => {
            const listItem = document.createElement('li');
            listItem.className = item.is_directory ? 'folder' : 'file';
            listItem.setAttribute('data-path', item.path);
            
            const itemSpan = document.createElement('span');
            const icon = document.createElement('i');
            icon.className = `bi ${item.is_directory ? 'bi-folder' : 'bi-file-earmark-text'}`;
            
            itemSpan.appendChild(icon);
            itemSpan.appendChild(document.createTextNode(` ${item.name}`));
            listItem.appendChild(itemSpan);
            
            listElement.appendChild(listItem);
        });
    }
    
    /**
     * 切换文件夹的展开/折叠状态
     * @param {HTMLElement} folderElement - 文件夹元素
     */
    toggleFolder(folderElement) {
        const path = folderElement.getAttribute('data-path');
        const isExpanded = folderElement.classList.contains('expanded');
        
        if (isExpanded) {
            // 折叠文件夹
            folderElement.classList.remove('expanded');
            
            // 更新图标
            const icon = folderElement.querySelector('i');
            if (icon) {
                icon.className = 'bi bi-folder';
            }
            
            // 保留子列表，但隐藏它（通过CSS控制）
        } else {
            // 展开文件夹
            folderElement.classList.add('expanded');
            
            // 更新图标
            const icon = folderElement.querySelector('i');
            if (icon) {
                icon.className = 'bi bi-folder-fill';
            }
            
            // 检查是否已有子列表
            const existingSubList = folderElement.querySelector('ul');
            if (existingSubList) {
                // 已有子列表，不需要重新加载
                return;
            }
            
            // 如果此路径已加载过但没有子列表，则创建一个空的子列表
            if (this.loadedPaths.has(path)) {
                const emptyList = document.createElement('ul');
                folderElement.appendChild(emptyList);
                return;
            }
            
            // 加载子目录内容
            this.loadDirectory(path, folderElement);
        }
    }
    
    /**
     * 选择文件
     * @param {HTMLElement} fileElement - 文件元素
     */
    selectFile(fileElement) {
        // 移除之前选中的文件的激活状态
        if (this.activeFile) {
            this.activeFile.classList.remove('active');
        }
        
        // 设置新的激活文件
        fileElement.classList.add('active');
        this.activeFile = fileElement;
        
        // 获取文件路径
        const path = fileElement.getAttribute('data-path');
        
        // 触发文件选择事件
        const event = new CustomEvent('file-selected', {
            detail: {
                path: path,
                name: fileElement.querySelector('span').textContent.trim()
            }
        });
        this.container.dispatchEvent(event);
    }
    
    /**
     * 刷新指定路径的目录内容
     * @param {string} path - 要刷新的路径，默认为当前路径
     */
    refresh(path = null) {
        const refreshPath = path || this.currentPath;
        
        // 从已加载路径集合中移除
        this.loadedPaths.delete(refreshPath);
        
        // 如果是当前路径，则重新加载
        if (refreshPath === this.currentPath) {
            this.loadDirectory(refreshPath);
        } else {
            // 查找对应的文件夹元素
            const folderElement = this.container.querySelector(`li.folder[data-path="${refreshPath}"]`);
            if (folderElement && folderElement.classList.contains('expanded')) {
                // 移除子列表
                const subList = folderElement.querySelector('ul');
                if (subList) {
                    folderElement.removeChild(subList);
                }
                
                // 重新加载
                this.loadDirectory(refreshPath, folderElement);
            }
        }
    }
}

// 当文档加载完成后初始化文件浏览器
document.addEventListener('DOMContentLoaded', function() {
    // 获取项目ID
    const projectElement = document.querySelector('.project-path .path');
    if (!projectElement) return;
    
    // 从URL中获取项目ID，格式为 /project/{id}
    let projectId = '1'; // 默认值
    const urlPath = window.location.pathname;
    const projectMatch = urlPath.match(/\/project\/([^\/]+)/);
    if (projectMatch && projectMatch[1]) {
        projectId = projectMatch[1];
    } else if (projectElement.getAttribute('data-id')) {
        projectId = projectElement.getAttribute('data-id');
    }
    
    console.log('初始化文件浏览器，项目ID:', projectId);
    
    // 初始化文件浏览器
    window.fileExplorer = new FileExplorer('project-testcases', projectId);
});